<template>
  <div class="jz-upload">
    <a-modal
      :title="title"
      :width="width"
      :visible="visible"
      :footer="null"
      @cancel="handleClose"
    >
      <uploader
        ref="uploader"
        :options="options"
        :autoStart="false"
        :fileStatusText="fileStatusTexts"
        @file-success="onFileSuccess"
        class="uploader-wrapper"
      >
        <div class="uploader-operation">
          <div class="uploader-group">
            <uploader-btn :attrs="fileAttrs"><i class="el-icon-folder"></i>选择文件</uploader-btn>
            <a-button icon="upload" @click="handleUpload">上传</a-button>
          </div>
          <!-- <a-button-group>
            <a-button icon="" size="medium">文件视图</a-button>
            <a-button type="primary" size="medium">列表视图</a-button>
          </a-button-group> -->
        </div>
        <!-- <uploader-list></uploader-list> -->
        <jz-list></jz-list>
      </uploader>
    </a-modal>
  </div>
</template>

<script>
import JzList from './components/list'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  name: 'JzUpload',
  props: {
    // 控制弹窗是否显示,同el-dialog文档一样
    visible: {
      type: Boolean,
      default: false
    },
    // 上传文件类型： 1.file 文档类型 2.img 图片类型
    type: {
      type: String,
      default: ''
    },
    // 限制上传文件类型 同input accept
    fileAttrs: {
      type: Object,
      default: function () {
        return {
          accept: '*'
        }
      }
    },
    // 宽度 同el-dialog文档一样
    width: {
      type: String,
      default: '600px'
    },
    // 标题 同el-dialog文档一样
    title: {
      type: String,
      default: '附件上传'
    }
  },
  components: {
    JzList
  },
  data () {
    return {
      options: {
        target: process.env.VUE_APP_API_BASE_URL + '/api/uploadpictures/UploadPicturese',
        testChunks: false,
        chunkSize: 30 * 1024 * 1024,
        headers: {
          Authorization: storage.get(ACCESS_TOKEN),
          GF: this.$store.getters.userid
        }
      },
      fileStatusTexts: {
        success: '上传成功',
        error: '上传失败',
        uploading: '上传中...',
        paused: '暂停',
        waiting: '排队中...'
      },
      fileList: []
    }
  },
  methods: {
    // 文件上传成功
    onFileSuccess (rootFile, file, response) {
      const res = JSON.parse(response)
      const { data } = res
      if (!res.code) {
        return
      }
      const merageData = this.fileList.concat(data)
      const newResult = merageData.filter(item => item)
      // 返回上传成功之后的结果，以及源文件数据
      this.$emit('success', newResult, file)
    },
    handleUpload () {
      const uploaderInstance = this.$refs.uploader.uploader
      if (!uploaderInstance.fileList.length) {
        this.$message.info('请选择文件')
        return
      }
      uploaderInstance.resume()
    },
    handleClose () {
      // 获取当前uploader实例
      const uploaderInstance = this.$refs.uploader.uploader
      const that = this
      if (uploaderInstance.fileList.length) {
        that.$confirm({
          title: '提示',
          content: '确认当前文件是否上传成功?',
          okText: '确认',
          cancelText: '取消',
            onOk () {
            uploaderInstance.cancel()
            that.fileList = []
            that.$emit('update:visible', false)
          },
          onCancel () {
            that.$message.info('已取消关闭')
          }
        })
      } else {
        uploaderInstance.cancel()
        that.$emit('update:visible', false)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .uploader-wrapper {
    /deep/.ant-btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left-color: hsla(0,0%,100%,.5);
      top: 0;
    }
  }
</style>
<style lang="less">
  .uploader-wrapper {
    .uploader-operation {
      margin-bottom: 10px;
    }
    .uploader-group {
      line-height: 32px;
      .uploader-btn {
        border: 1px solid #DCDFE6;
        padding: 4px 16px;
        font-size: 14px;
        height: 32px;
        line-height: 1.499;
        box-sizing: border-box;
        font-weight: 500;
        border-radius: 5px;
        &:hover {
          color: #409EFF;
          border-color: #c6e2ff;
          background-color: #ecf5ff;
        }
        &:first-child {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        &:not(:first-child):not(:last-child) {
          border-left-color: hsla(0,0%,100%,.5);
          border-radius: 0;
        }
      }
    }
    .uploader-list {
      border: 1px solid #DCDFE6;
      height: 400px;
      overflow: auto;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
</style>
